<template>
  <div>
    <div class="search">
      <el-form :inline="true" :model="queryParams" size="small">
        <el-form-item label="部门">
          <depart-tree
            style="width: 150px"
            class="depart-tree"
            v-model="queryParams.deptNos"
            :departments="departments"
          />
        </el-form-item>
        <el-form-item label="姓名">
          <el-input style="width: 150px" v-model="queryParams.name"></el-input>
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker style="width: 150px" :picker-options="pickerOptions" value-format="yyyy-MM-dd" v-model="queryParams.dayTime" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="状态">
          <el-select
          style="width: 150px"
          clearable
          size="small"
          v-model="queryParams.status"
          placeholder="请选择"
          >
             <el-option label="已入校" value="1"/>
             <el-option label="未入校" value="2"/>
          </el-select>
        </el-form-item>
      </el-form>
       <div style="display: flex;">
        <div v-if="checkAuthority('/teacher/eyes')" class="switch-btn cursor iconfont" :class="[isShow ? 'icon-yanjing': 'icon-biyan']" @click="handleClickIsShow"></div>
      <div>
        <el-button v-if="checkAuthority('/select')" size="mini" type="primary" @click="handleSearch">查 询</el-button>
      </div>
      </div>
    </div>
      <acc-table :tableData="tableData" :columnDefs="columnDefs">
        <template #order={index}>
          <span>{{index + 1}}</span>
        </template>
        <template #cardNo={row}>
          <div>{{isShow && row.cardNo.length === 18 ?  $options.filters.idCarDesensitization(row.cardNo) : row.cardNo}}</div>
        </template>
        <template #teacherPhone={row}>
          <div>{{isShow ?  $options.filters.idCarDesensitization(row.teacherPhone) : row.teacherPhone}}</div>
        </template>
      </acc-table>
      <acc-page :total='total' :page-size='pageVo.pageSize' :current-page='pageVo.pageNum'  @current-change='handleChangePage' @size-change='handleChangeSize'></acc-page>
  </div>
</template>

<script>
import { columnDefs } from './mock'
import { queryDeptListBySchoolNo } from '@/views/children/basic/js/teacherInfo'
import DepartTree from '@/views/children/basic/components/departTree'
import { query } from '@/views/children/antiepidemic/js/attendanceInfo'
import { decrypt } from '@/utils/crypto'
import { checkAuthority } from '@/utils/btnPermission' // 页面按钮权限
export default {
  components: { DepartTree },
  props: {
    currentCampus: String,
    updatedTime: String
  },
  data () {
    return {
      isShow: true,
      visible: false,
      departments: [],
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now()
        }
      },
      queryParams: {
        // tenantNo: null,
        // districtNo: null,
        // deptNo: null
        deptNos: null,
        dayTime: '',
        personType: 1,
        status: '',
        name: ''
      },
      columnDefs: [],
      tableData: [],
      pageVo: {
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      gradeOptions: [],
      classOptions: [],
      currentHeaderSelect: []
    }
  },
  created () {
    this.columnDefs = columnDefs
    this.queryDeptListBySchoolNo()
    this.handleSearch()
  },
  watch: {
    currentCampus (newVal) {
      this.queryParams.districtNo = newVal
      this.handleSearch()
    }
  },
  methods: {
    checkAuthority,
    handleClickIsShow () {
      this.isShow = !this.isShow
    },
    queryDeptListBySchoolNo () {
      queryDeptListBySchoolNo({}).then(res => {
        if (res.code === 0) {
          this.departments = res.data
        }
      })
    },
    handleSearch () {
      this.visible = false
      this.pageVo.pageNum = 1
      this.loadDataList()
    },
    loadDataList () {
      let userInfo = localStorage.getItem('Standard__User-Info')
      query({
        ...this.queryParams,
        deptNos: this.queryParams.deptNos ? this.queryParams.deptNos.split(',') : [],
        ...this.pageVo,
        schoolNo: JSON.parse(userInfo)?.value?.tenantNo
      }).then(res => {
        res.data = JSON.parse(decrypt(res.data))
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },
    handleChangePage (page) {
      this.pageVo.pageNum = page
      this.loadDataList()
    },
    handleChangeSize (size) {
      this.pageVo.pageSize = size
      this.handleSearch()
    }
    // handleClickHeaderSelect (val) {
    //   this.currentHeaderSelect = val
    //   this.handleSearch()
    // },
  }
}
</script>

<style lang='scss' scoped>
.search {
  display: flex;
  justify-content: space-between;
}

.switch-btn{
  width: 50px;
  height: 30px;
  line-height: 30px;
  font-size: 30px;
  text-align: center;
}
</style>
